<template>
    <div>
        <m-table ref="tableRef" :columns="columns" :api="getAdminList" title="管理员列表" :formSearch="formState">
            <template #search>
                <a-form-item label="管理员名称" name="username">
                    <a-input v-model:value="formState.username" allow-clear />
                </a-form-item>

                <a-form-item label="状态" name="status">
                    <a-select v-model:value="formState.status" placeholder="请选择状态" allow-clear>
                        <a-select-option :value="1">启用</a-select-option>
                        <a-select-option :value="0">禁用</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="创建时间" name="create_time">
                    <a-date-picker v-model:value="formState.create_time" placeholder="请选择创建时间" allow-clear />
                </a-form-item>
            </template>


            <template #button>
                <a-button>权限分配</a-button>
                <a-button  v-perms="['/adminapi/system.admin/save']" @click="handleEdit('add')" type="primary" size="small">新增</a-button>
            </template>

            <template #operation="{ record }">
                <a-space>
                    <app-link :to="`/system/account/${record.id}`">
                        <a-button size="small">详情</a-button>
                    </app-link>
                    <a-button type="primary" v-perms="['/adminapi/system.admin/update']" @click="handleEdit('edit', record)" size="small">编辑</a-button>
                    <a-popconfirm title="确定删除吗？"  @confirm="handleDelete(record.id)">
                        <a-button danger type="primary" v-perms="['/adminapi/system.admin/delete']" size="small">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>

            <!-- 状态 -->
            <template #status="{ record }">
                <a-tag :color="record.status === 1 ? 'success' : 'error'">
                    {{ record.status === 1 ? '启用' : '禁用' }}
                </a-tag>
            </template>
        </m-table>

        <edit-popup ref="editPopupRef" @success="() => tableRef?.run()" />
    </div>
</template>

<script setup lang="ts">
import type { UnwrapRef } from 'vue';
import { getAdminList, deleteAdmin } from '@/api/system/permission/admin'
import EditPopup from './components/edit.vue'
const editPopupRef = ref<InstanceType<typeof EditPopup>>()
interface FormState {
    username: string
    status: number | null
}

const formState: UnwrapRef<FormState> = reactive({
    username: '',
    status: null
})

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 100,
        align: 'center'
    },
    {
        title: '管理员名称',
        dataIndex: 'username',
        width: 200,
    },
    {
        title: '昵称',
        dataIndex: 'nickname'
    }, {
        title: '最后登录时间',
        dataIndex: 'last_login_time',
        width: 180
    }, {
        title: '创建时间',
        dataIndex: 'create_time',
        width: 180
    }, {
        title: '最后登录IP',
        dataIndex: 'last_login_ip',
        width: 180
    }, {
        title: '状态',
        dataIndex: 'status',
        width: 80,
        align: 'center'
    }, {
        title: '操作',
        dataIndex: 'operation',
    }
]

// 表格引用
const tableRef = ref()

// // 刷新表格数据
// const refreshTable = () => {
//     tableRef.value?.run()
// }


const handleEdit = (mode: string, record?: any) => {
    editPopupRef.value?.open(mode, record)
}

const handleDelete = async (id: number) => {
    await deleteAdmin(id)
    tableRef.value?.run()
}
</script>
